<template>
	<div id="app">
		<hote-header />
		<div class="hote-admin-body">
			<hote-sidebar />
			<div class="hote-content-container">
				<a :href="'/admin/setting/floorArea/' + item.id"  v-for="item in areaList">
					<div class="hote-area-card-container">
						<img class="hote-area-icon" src="/images/area.png">
						<div class="hote-area-label">{{item.label}}</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</template>

<style>
	.hote-area-card-container {
		background-color: #1F4B99;
		display: inline-block;
		position: relative;
		width: 90px;
		height: 130px;
		border-radius: 5px;
	}
	.hote-area-icon {
		position: absolute;	
		left: 13px;
		top: 8px;
		width: 64px;
		height: 64px;
	}
	.hote-area-label {
		position: absolute;
		font-size: 14px;
		color: #fff;
		top: 74px;
		width: 90px;
		text-align: center;
	}
</style>

<script>
	import config  from '../../config';
	import Header from '../../components/Header';
	import Sidebar from '../../components/Sidebar';

	export default {
		data() {
			return {
				areaList: [
					{
						id: 1,
						label: 'A区'
					}
				]
			}
		},
		components: {
			'hote-header': Header,
			'hote-sidebar': Sidebar
		}	
	}
</script>